<template>
<div>
    <div
      class="search_template"
      style="background:white;height:120px;"
    >
      <div
        class="content"
        style="height: 80px; display: flex; justify-content: space-around;align-items: center;">
        <div>
          <span style="color:#888; font-weight:800;">用户名:</span>
          <el-input
            v-model="search"
            placeholder="请输入用户名搜索"
            @keyup.enter.native="onEnterSearch"
            style="width:200px;height50px;"
          />
        </div>
        <div align="right">
          <el-button size="mini" icon="el-icon-search" type="success" @click="onEnterSearch">点击查询</el-button>
        </div>
      </div>
      <div align="left" style="margin-left:10px">
        <el-button size="mini" type="primary" plain icon="el-icon-plus" @click="addEngineering">新增</el-button>
      </div>
    </div>
 
	<el-container style="height:500px; border: 1px solid #eee;overflow: auto;">
		<el-container
			style="width:200px; margin-right:5px;overflow-y:scroll;padding-left: 10px;padding-right: 20px;background: #fff;padding-top:5px"
		>
			<el-tree :data="data" ref="tree_one" :accordion="true" node-key="id" @node-click="getCheckedKeys"></el-tree>
		</el-container>
		<el-container>
			<!-- <router-view></router-view> -->
			<el-table
				:data="tableData"
				ref="table"
                border 
				style="width: 100%"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection"></el-table-column>
				<el-table-column align="center" label="用户ID" prop="userId"></el-table-column>
				<el-table-column align="center" label="用户名" prop="nickName"></el-table-column>
				<el-table-column align="center" label="用户账号" prop="userName"></el-table-column>
				<el-table-column align="center" label="用户编码" prop="userCode"></el-table-column>
				<el-table-column align="center" prop="sex" label="性别" :formatter="formatRole"></el-table-column>
				<el-table-column align="center" prop="email" label="用户邮箱"></el-table-column>
				<el-table-column align="center" prop="phonenumber" :show-overflow-tooltip="true" label="手机号"></el-table-column>
				<el-table-column align="center" prop="status" :show-overflow-tooltip="true" label="状态"></el-table-column>
				<el-table-column align="center" width="380"  label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" plain @click="editEngineering">修改</el-button>
						<el-button size="mini" type="primary" plain @click="set_user_role_one">设置角色</el-button>
						<el-button size="mini" type="danger" plain @click="prohibit_prohibit">禁用</el-button>
						<el-button size="mini" type="danger" plain @click="deleteEngineering">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!--新增功能-->
			<el-dialog title="新增信息" :visible.sync="dialogVisibleAdd" :destroy-on-close="true" width="55%">
				<span>
					<FileAdd ref="FileAdd" @closeModal="closeAdd"></FileAdd>
				</span>
				<!-- 操作按钮 -->
				<div slot="footer">
					<el-button size="mini" type="info" class="table_header_btn" @click="saveAdd">保存</el-button>
					<el-button
						size="mini"
						type="info"
						class="table_header_btn"
						@click="dialogVisibleAdd = false"
					>关闭</el-button>
				</div>
			</el-dialog>
			<!--新增功能-->
			<!--修改功能-->
			<el-dialog title="修改信息" :visible.sync="dialogVisibleEdit" :destroy-on-close="true" width="55%">
				<span>
					<FileModification
						ref="FileModification"
						:EngineeringData="multipleSelection"
						@closeModal="closeEdit"
					></FileModification>
				</span>
				<div slot="footer">
					<el-button size="mini" type="info" class="table_header_btn" @click="saveEdit">保存</el-button>
					<el-button
						size="mini"
						type="info"
						class="table_header_btn"
						@click="dialogVisibleEdit = false"
					>关闭</el-button>
				</div>
			</el-dialog>
			<!--修改功能-->
			<!--设置角色-->
			<el-dialog title="设置角色" :visible.sync="set_role" :before-close="close_role" width="22%">
				<el-select v-model="set_role_id" multiple placeholder="请选择">
					<el-option
						v-for="item in roleOptions"
						:key="item.roleId"
						:label="item.roleName"
						:value="item.roleId"
						:disabled="item.status == 1"
					></el-option>
				</el-select>
				<div slot="footer" class="dialog-footer">
					<el-button @click="close_role">取消</el-button>
					<el-button type="primary" @click="set_user_role()">确定</el-button>
					<!-- <el-button @click="dialogFormVisible_two = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormVisible_two = false">确 定</el-button>-->
				</div>
			</el-dialog>
			<!--设置角色-->
		</el-container>
	</el-container>
    <el-container style="margin-top:20px;margin-bottom:20px;float:right;margin-right:20px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </el-container>
    </div>
</template>
<script>
import FileAdd from './add';
import {
    userList,
    userDel,
    get_organization_list,
    get_organization_tree,
    user_user_prohibit,
    set_user_role,
    roles_tree_tree,
    getUserSearch
} from '@/api/user';
import FileModification from './cation';
import { getToken, setToken, removeToken } from '@/utils/auth';
// 定义一个全局变量,存放table被选中的行索引
export default {
    components: {
        FileAdd,
        FileModification
    },
    computed: {},
    data() {
        return {
            tableOption: { isShowHeader: true, height: 'auto' },
            multipleSelection: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            search:"",
            dialogVisibleAdd: false,
            dialogVisibleEdit: false,
            form: {
                userId: '', //用户ID
                userName: '', //用户账号
                nickName: '', //用户名称
                deptId: '', //部门编号
                email: '', //用户邮箱
                phonenumber: '', //手机号码
                sex: '' //用户性别
            },
            set_role: false,
            tableData: [],
            data: [],
            check_id: '',
            set_role_id: ''
        };
    },

    created() {
        roles_tree_tree()
            .then(response => {
                if (response.data.code == 200) {
                    console.log('我是加载角色', response);
                    this.roleOptions = response.data.data;
                } else {
                    this.$message.error(response.data.msg);
                }
            })
            .catch(() => {});
        /********加载树的结构***********/
        var data_data = {
            deptId: 1
        };

        get_organization_tree(data_data)
            .then(response => {
                if (response.data.code == 200) {
                    this.data = response.data.depts;
                } else {
                    this.$message.error(response.data.msg);
                }
            })
            .catch(() => {});
        /**********加载树的结构********/
    },
    methods: {
        close_role() {
            this.set_role_id = '';
            this.set_role = false;
        },
        formatRole: function(row, column) {
            return row.sex == '0' ? '男' : row.sex == '1' ? '女' : 'aaa';
        },
        //添加的弹出框
        addEngineering() {
            this.dialogVisibleAdd = true;
            this.$nextTick(function() {
                this.$refs.FileAdd.select_department(this.check_id);
            });
        },
        //修改弹出框
        editEngineering() {
            if (this.multipleSelection.length != 1) {
                this.$notify.error({
                    title: '错误',
                    message: '请选择一条数据进行修改',
                    position: 'bottom-right'
                });
                return false;
            }
            // this.$refs.FileModification.modify_display_user();
            // this.$refs.FileModification.modifyUser();
            this.dialogVisibleEdit = true;
            setTimeout(() => {
                this.$refs.FileModification.modifyUser();
            }, 10);
        },
        // 添加保存
        saveAdd() {
            // 调用子路由方法
            this.$refs.FileAdd.addSave();
            var userList_data = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                token: getToken()
            };
            userList(userList_data)
                .then(response => {
                    if (response.data.code == 200) {
                        // console.log("我需要的===",response.data.rows)

                        this.tableData = response.data.rows;
                        this.total = response.data.total;
                    } else {
                        // this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {
                    // this.loading = false
                    // this.$message.error(response.data.msg)
                });
        },
        closeAdd(val) {
            this.dialogVisibleAdd = val;
            this.organization_list(this.check_id);
            // console.log("我是关闭新增")
            // this.userList
        },
        // 修改保存
        saveEdit() {
            // 调用子路由方法
            console.log('我是修改保存');
            this.$refs.FileModification.editSave();
            var userList_data = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                token: getToken()
            };
            userList(userList_data)
                .then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.rows;
                        this.total = response.data.total;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {
                    // this.loading = false
                    // this.$message.error(response.data.msg)
                });
        },
        closeEdit(val) {
            this.dialogVisibleEdit = val;
            // this.query();
            this.organization_list(this.check_id);
            console.log('我是关闭修改');
        },
        //勾选复选框
        handleSelectionChange(val) {
            console.log('=====', val);
            this.multipleSelection = val;
        },
        //删除
        deleteEngineering() {
            if (this.multipleSelection.length == 0) {
                this.$notify.error({
                    title: '错误',
                    message: '请至少选择一条数据进行删除',
                    position: 'bottom-right'
                });
                return false;
            }

            var params_one = {
                userId: this.multipleSelection[0].userId
            };
            userDel(params_one)
                .then(response => {
                    if (response.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.organization_list(this.check_id);
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {
                    // this.loading = false
                    // this.$message.error(response.data.msg)
                });
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            // this.query();
		},     
		/************模糊查询搜索功能***************/
        onEnterSearch(e, searchVal) {
            /***********调用模糊查询接口***************/

            var new_add_params = {
                pageNum: 1,
                pageSize: 10,
                nickName: this.search //用户名搜索
            };
            getUserSearch(new_add_params)
                .then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data.list;
                        this.$message({
                            message: '查询成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
            /*********调用模糊查询的接口**************/
        },
        /**********模糊查询搜索功能****************/
                /************分页的数据***************/
        handleSizeChange: function(size) {
            this.pageSize = size;
            this.organization_list();
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
            this.organization_list();
        },
        /************分页的数据*************/
        /*****树的方法********/
        getCheckedKeys(id) {
            var deptId = id.id;
            this.check_id = deptId;
            console.log('我需要的deptId', deptId);
            this.organization_list(deptId);
        },
        organization_list(deptId) {
            // get_organization_list

            var params_list = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                deptId: deptId
            };
            // var params_list=deptId
            console.log('页数'+this.currentPage)
            console.log('条数'+this.pageSize)
            userList(params_list)
                .then(response => {
                    console.log('我现在需要的列表数据', response.data);
                    if (response.data.code == 200) {
                        this.tableData = response.data.data.list;
                        this.total = response.data.data.total;
                        // this.pageSize = response.data.pageSize;
                        // this.pageNum = response.data.pageNum;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        },

        /*****树的方法*******/
        /***********用户禁用***************/
        prohibit_prohibit() {
            if (this.multipleSelection.length != 1) {
                this.$notify.error({
                    title: '错误',
                    message: '请选择一条数据进行禁用',
                    position: 'bottom-right'
                });
                return false;
            }
            // user_user_prohibit
            var params_list = {
                userId: this.multipleSelection[0].userId,
                status: 1
            };
            user_user_prohibit(params_list)
                .then(response => {
                    console.log('我现在需要的列表数据', response.data.rows);
                    if (response.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '禁用成功!'
                        });
                        this.organization_list(this.check_id);
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        },
        set_user_role_one() {
            if (this.multipleSelection.length != 1) {
                this.$notify.error({
                    title: '错误',
                    message: '请选择一条数据进行修改',
                    position: 'bottom-right'
                });
                return false;
            }
            this.set_role = true;
            // this.set_user_role()
        },
        set_user_role() {
            this.set_role = false;
            var params_list = {
                userId: this.multipleSelection[0].userId,
                roleIds: this.set_role_id
            };

            set_user_role(params_list)
                .then(response => {
                    if (response.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '设置成功!'
                        });
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        }
        /***********用户禁用***********/
    },
    mounted: function() {
        // this.query();
    }
};
</script>
<style scoped>
</style>